<template>

  <div class="owner">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/admin/base/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>基本信息管理</el-breadcrumb-item>
      <el-breadcrumb-item>业主管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <el-card style="">
      <el-container>

        <el-header style="border: 1px solid #e2e2e2;height: 100px">

          <el-form style="width:920px;height: 70px;margin: 30px 0 0 0">

            <el-form-item>
              电话:
              <el-select v-model="formsearch.telephone" style="width: 300px;margin: 0 20px">

                <div v-for="m in buildingArr">
                  <el-option :label="m.telephone" :value="m.telephone"></el-option>

                </div>

              </el-select>
              身份证号码:
              <el-select v-model="formsearch.idNumber" style="width: 300px;margin: 0 20px">

                <div v-for="m in buildingArr">
                  <el-option :label="m.idNumber" :value="m.idNumber"></el-option>
                </div>

              </el-select>

              <el-button icon="el-icon-search" @click="search()">搜索</el-button>

            </el-form-item>


          </el-form>


        </el-header>


        <el-main style="border:1px solid  #e2e2e2;margin: 10px 0 0 0">
          <el-container>

            <el-header style="padding: 0;height: 30px">

              <div style="width: 170px;padding: 0;float: left">

                <el-button type="primary" @click="dialogFormVisible= true">添加</el-button>
                <el-button type="warning" @click="deletes()">删除</el-button>


                <el-dialog title="添加业主" :visible.sync="dialogFormVisible">

                  <el-form :model="form">
                    <el-form-item label="业主姓名" :label-width="formLabelWidth">
                      <el-input v-model="form.ownerName"
                                placeholder="如:张三"
                                style="width: 90%;"></el-input>
                    </el-form-item>

                    <el-form-item label="业主电话" :label-width="formLabelWidth">
                      <el-input v-model="form.telephone"
                                placeholder="请输入11位数字"
                                style="width: 90%;"></el-input>
                    </el-form-item>

                    <el-form-item label="性别" :label-width="formLabelWidth">
                      <template>
                        <el-radio v-model="form.gender" label="男">男</el-radio>
                        <el-radio v-model="form.gender" label="女">女</el-radio>
                      </template>
                    </el-form-item>

                    <el-form-item label="身份证号" :label-width="formLabelWidth">

                      <el-input v-model="form.idNumber"
                                placeholder="请输入18位身份证号"
                                style="width: 90%;"></el-input>

                    </el-form-item>

                    <el-form-item :label-width="formLabelWidth" style="width:350px;display:block;margin: 0 auto">


                      <el-button @click="dialogFormVisible = false">取 消</el-button>

                      <el-button type="primary" @click="dialogFormVisiblemin= true">下一步</el-button>


                    </el-form-item>


                  </el-form>

                </el-dialog>


                <el-dialog title="添加详情" :visible.sync="dialogFormVisiblemin">

                  <el-form :model="form">

                    <el-form-item label="房屋编号" :label-width="formLabelWidth">

                      <el-select v-model="form.room" style="width: 300px;margin: 0 20px">

                        <div v-for="m in roomArr">

                          <el-option :label="m" :value="m"></el-option>

                        </div>


                      </el-select>


                    </el-form-item>

                    <el-form-item label="备注" :label-width="formLabelWidth">
                      <el-input type="textarea" v-model="form.remarks" autocomplete="off"
                                style="width: 90%;"></el-input>
                    </el-form-item>

                    <el-form-item :label-width="formLabelWidth" style="width:350px;display:block;margin: 0 auto">

                      <el-button @click="dialogFormVisiblemin = false">取 消</el-button>
                      <el-button type="primary" @click="add()">确 定</el-button>

                    </el-form-item>


                  </el-form>

                </el-dialog>


              </div>


              <div style="width: 344px;padding: 0;float:right;">


                <el-tooltip content="刷新" placement="bottom">
                  <el-button icon="el-icon-refresh-left" style="margin: 0 0 0 10px" @click="reFresh()"></el-button>
                </el-tooltip>

                <el-tooltip content="筛选" placement="bottom">
                  <el-popover
                      placement="bottom"
                      trigger="click">
                    <template>
                      <el-checkbox v-model="b1" style="display: block">序号</el-checkbox>
                      <el-checkbox v-model="b2" style="display: block">户主姓名</el-checkbox>
                      <el-checkbox v-model="b3" style="display: block">户主电话</el-checkbox>
                      <el-checkbox v-model="b4" style="display: block">性别</el-checkbox>
                      <el-checkbox v-model="b5" style="display: block">身份证号</el-checkbox>
                      <el-checkbox v-model="b6" style="display: block">房屋编号</el-checkbox>

                    </template>
                    <el-button slot="reference" icon="el-icon-menu" style="margin: 0 0 0 10px"></el-button>
                  </el-popover>
                </el-tooltip>

                <el-tooltip content="导出" placement="bottom">
                  <el-button icon="el-icon-folder-opened" style="margin: 0 0 0 10px"></el-button>
                </el-tooltip>
                <el-tooltip content="打印" placement="bottom">
                  <el-button icon="el-icon-printer"></el-button>
                </el-tooltip>
                <el-tooltip content="Top center" placement="bottom">
                  <el-button icon="el-icon-warning-outline"></el-button>
                </el-tooltip>

              </div>

            </el-header>

            <el-main>

              <el-table
                  v-loading="loading"
                  ref="multipleTable"
                  tooltip-effect="dark"
                  @selection-change="handleSelectionChange"
                  :data="tableData"
                  height="400"
                  style="width: 100%">

                <el-table-column
                    type="selection"
                    width="100">
                </el-table-column>
                <el-table-column
                    type="index"
                    label="序号"
                    v-if="b1"
                    sortable
                    align="center"
                    width="100">
                </el-table-column>
                <el-table-column
                    prop="ownerName"
                    label="户主姓名"
                    v-if="b2"
                    sortable
                    align="center"
                    width="200">
                </el-table-column>

                <el-table-column
                    prop="telephone"
                    label="户主电话"
                    v-if="b3"
                    sortable
                    align="center"
                    width="200">
                </el-table-column>
                <el-table-column
                    prop="gender"
                    label="性别"
                    v-if="b4"
                    align="center"
                    width="200">
                </el-table-column>
                <el-table-column
                    prop="idNumber"
                    label="身份证号"
                    v-if="b5"
                    align="center"
                    width="200">
                </el-table-column>
                <el-table-column
                    prop="room"
                    label="房屋编号"
                    v-if="b6"
                    align="center"
                    width="200">
                </el-table-column>

                <el-table-column
                    label="操作"
                    align="center"
                    width="250">
                  <template slot-scope="scope">

                    <el-button type="primary" style="text-align: center" size="mini"
                               @click="selectAOwner(scope.row.id)">编辑
                    </el-button>

                    <el-popconfirm style="margin: 0 0 0 10px"
                                   title="这是一段内容确定删除吗？"
                                   @confirm="deleteRow(scope.row.id)"
                    >
                      <el-button slot="reference" type="warning" size="mini">删除</el-button>
                    </el-popconfirm>

                  </template>


                </el-table-column>

              </el-table>
              <template>
                <div class="block">
                  <el-pagination
                      background
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="paginations.page_index"
                      :page-sizes="paginations.page_sizes"
                      :page-size="paginations.page_size"
                      :total="paginations.total"
                      layout="total, sizes, prev, pager, next, jumper"
                  >
                  </el-pagination>
                </div>
              </template>


              <el-dialog title="编辑业主" :visible.sync="dialogFormVisible1">

                <el-form :model="form">
                  <el-form-item label="业主姓名" :label-width="formLabelWidth">
                    <el-input v-model="form.ownerName" autocomplete="off"
                              style="width: 90%;"></el-input>
                  </el-form-item>

                  <el-form-item label="业主电话" :label-width="formLabelWidth">
                    <el-input v-model="form.telephone" autocomplete="off"
                              style="width: 90%;"></el-input>
                  </el-form-item>

                  <el-form-item label="性别" :label-width="formLabelWidth">
                    <template>
                      <el-radio v-model="form.gender" label="男">男</el-radio>
                      <el-radio v-model="form.gender" label="女">女</el-radio>
                    </template>
                  </el-form-item>

                  <el-form-item label="身份证号" :label-width="formLabelWidth">

                    <el-input v-model="form.idNumber" autocomplete="off"
                              style="width: 90%;"></el-input>

                  </el-form-item>

                  <el-form-item :label-width="formLabelWidth" style="width:350px;display:block;margin: 0 auto">


                    <el-button @click="dialogFormVisible1 = false">取 消</el-button>

                    <el-button type="primary" @click="dialogFormVisiblemin1= true">下一步</el-button>


                  </el-form-item>


                </el-form>

              </el-dialog>


              <el-dialog title="编辑详情" :visible.sync="dialogFormVisiblemin1">

                <el-form :model="form">

                  <el-form-item label="房屋编号" :label-width="formLabelWidth">

                    <el-input v-model="form.room" autocomplete="off"
                              style="width: 90%"></el-input>

                  </el-form-item>

                  <el-form-item label="备注" :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="form.remarks" autocomplete="off"
                              style="width: 90%;"></el-input>
                  </el-form-item>

                  <el-form-item :label-width="formLabelWidth" style="width:350px;display:block;margin: 0 auto">

                    <el-button @click="dialogFormVisiblemin1 = false">取 消</el-button>
                    <el-button type="primary" @click="edit()">确 定</el-button>

                  </el-form-item>


                </el-form>

              </el-dialog>


            </el-main>

          </el-container>


        </el-main>


      </el-container>
    </el-card>


  </div>


</template>

<script>

export default {


  data() {
    return {

      buildingArr: [],
      // loading: true,
      checked: true,
      b1: true,
      b2: true,
      b3: true,
      b4: true,
      b5: true,
      b6: true,

      multipleSelection: [],


      formLabelWidth: '120px',
      dialogTableVisible: false,
      dialogFormVisible: false,

      dialogTableVisiblemin: false,
      dialogFormVisiblemin: false,

      dialogTableVisiblemin1: false,
      dialogFormVisiblemin1: false,

      dialogFormVisible1: false,
      dialogTableVisible1: false,


      formsearch: {
        telephone: "",
        idNumber: "",
      },

      form: {
        ownerName: '',
        telephone: '',
        gender: '男',
        idNumber: '',
        room: '',
        remarks: "",
      },
      roomArr: [],
      tableData: [],

      paginations: {
        page_index: 1, //当前页
        total: 10, //总数
        page_size: 5, //一页显示多少
        page_sizes: [5, 10, 15, 20], //每页显示多少条
      },

    }
  },
  created: function () {
    this.selectOwner();
    this.query()
  },

  methods: {
    //分页查询改变每页条数方法
    handleSizeChange(val) {
      this.paginations.page_size = val;
      console.log(`每页 ${this.paginations.page_size} 条`);
      this.loadCompliant(this.paginations.page_size, this.paginations.page_index);
    },
    handleCurrentChange(val) {
      this.paginations.page_index = val;
      console.log(`当前页: ${this.paginations.page_index}`);
      this.loadCompliant(this.paginations.page_size, this.paginations.page_index);
    },
    loadCompliant(page_size, page_index) {

      let token = localStorage.getItem("accessToken");
      this.axios.get(`http://localhost:8080/owner/get/page/${page_index}/${page_size}`, {header: {"Authentication": "Bearer " + token}}).then((response) => {
        this.tableData = response.data.list
        this.paginations.total = response.data.totalCount
      })
    },


    query() {
      let token = localStorage.getItem("accessToken");
      this.axios.get("http://localhost:8080/owner/id/tele/select", {header: {"Authentication": "Bearer " + token}})
          .then((response) => {
            this.buildingArr = response.data.data
          })
      this.axios.get("http://localhost:8080/house/get/rooms", {header: {"Authentication": "Bearer " + token}})
          .then((response) => {
            this.roomArr = response.data.data
          })


    },


    reFresh() {
      this.selectOwner();
    },
    search() {
      let token = localStorage.getItem("accessToken");

      this.axios.get("http://localhost:8080/owner/select/owner?telephone=" + this.formsearch.telephone + "&idNumber=" + this.formsearch.idNumber, {header: {"Authentication": "Bearer " + token}})
          .then((response) => {
            this.tableData = response.data.data

          })
    },
    selectOwner() {
      let token = localStorage.getItem("accessToken");
      this.axios.get("http://localhost:8080/owner/select/owners", {header: {"Authentication": "Bearer " + token}}).then((response) => {


        this.tableData = response.data.data;
      })
    },
    add() {
      let token = localStorage.getItem("accessToken");

      this.dialogFormVisible = false
      this.dialogFormVisiblemin = false
      this.axios.post("http://localhost:8080/owner/add/owner", this.form, {header: {"Authentication": "Bearer " + token}}).then((response) => {
        this.selectOwner();
        this.query()
      })
    },


    selectAOwner(row) {
      let token = localStorage.getItem("accessToken");
      this.dialogFormVisible1 = true

      this.axios.get("http://localhost:8080/owner/select/owner/" + row, {header: {"Authentication": "Bearer " + token}}).then((response) => {
        this.form = response.data.data;
      })
    },
    edit() {
      let token = localStorage.getItem("accessToken");
      this.dialogFormVisible1 = false
      this.dialogFormVisiblemin1 = false
      this.axios.post("http://localhost:8080/owner/update/owner", this.form, {header: {"Authentication": "Bearer " + token}}).then((response) => {
        this.selectOwner();
        this.query()
      })

    },


    deleteRow(row) {
      let token = localStorage.getItem("accessToken");
      this.axios.get("http://localhost:8080/owner/delete/owner?id=" + row, {header: {"Authentication": "Bearer " + token}}).then((response) => {
        this.selectOwner();
        this.query()
      })

    },
    deletes() {
      let token = localStorage.getItem("accessToken");
      this.axios.post("http://localhost:8080/owner/rows/delete", this.multipleSelection, {header: {"Authentication": "Bearer " + token}}).then((response) => {
        this.selectOwner();
        this.query()
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }


}
</script>

<style scoped>

</style>